<!--
@description ：敏感行为 结束语
-->

<template>
  <div class="app-container">
    <el-card>
      <div style="display: flex;justify-content: space-between;align-items: center">
        <h3 style="display: inline-block">正常结束语设置</h3>
        <el-button plain type="info" @click="goback">返回</el-button>
      </div>
    </el-card>
    <el-card style="margin-top: 20px;">
      <el-row class="header-search">
        <el-col :span="18" style="line-height: 34px;color: #999999">
          客户微信内容为以下内容（精确匹配），则视为正常结束语，员工可不作回复，且不会标记为异常状态（语音通话/视频通话自动视为正常结束语）
        </el-col>
        <el-col :span="6" style="text-align: end">
          <el-button type="primary" @click="toAdd" v-has-permi="['risk:language:add']">新增</el-button>
        </el-col>
      </el-row>
      <div style="margin-top: 12px">
        <el-table v-loading="loading" :data="tableList" max-height="560" min-height="420" style="width: 100%" v-has-permi="['risk:language:list']">
          <el-table-column :show-overflow-tooltip="false" align="center" label="内容" min-width="240"
                           prop="finishContent">
          </el-table-column>
          <el-table-column :show-overflow-tooltip="false" align="center" label="创建人" min-width="140"
                           prop="createBy">
          </el-table-column>
          <el-table-column :show-overflow-tooltip="false" align="center" label="创建时间" min-width="170"
                           prop="createTime"></el-table-column>
          <el-table-column align="center" class-name="small-padding fixed-width" fixed="right" label="操作"
                           width="260">
            <template slot-scope="{ row }">
              <div style="display: flex; justify-content: space-around">
                <el-button size="mini" type="text" @click="todel(row)" v-has-permi="['risk:language:remove']">删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
                          @handleCurrentChange="handleCurrentChange"
                          @handleSizeChange="handleSizeChange"></NormalPagination>
      </div>
    </el-card>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :show-close="true"
               :visible.sync="addVisible"
               title="添加结束语" width="520px">
      <el-form ref="endingForm" :model="endingForm" :rules="endingRules" label-width="90px">
        <div v-for="(item,index) in endingForm.finishContent" :key="index">
          <el-form-item :label="`结束语${index + 1}`" class="showRedRules" style="position: relative">
            <el-input v-model="endingForm.finishContent[index]" maxlength="50"
                      placeholder="请添加结束语"
                      show-word-limit style="width: 300px;margin-bottom: 12px">
            </el-input>
            <i v-if="endingForm.finishContent.length != 1" class="el-icon-remove-outline conIcon"
               style="margin-left: 8px;  position: absolute;bottom: 14px;left: 324px;color: #F23031"
               @click="endingForm.finishContent.splice(index, 1)"></i>
            <i class="el-icon-circle-plus-outline conIcon"
               style="margin-left: 8px;position: absolute;bottom: 14px;left: 300px"
               @click="endingForm.finishContent.push('')"></i>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="addLoading" plain type="info" @click="addVisible = false">取消</el-button>
        <el-button v-preventReClick="1000" :loading="addLoading" type="primary" @click="handelEndingConfirm"
        >确定
        </el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="delvisible" title="删除确认" top="15% !important" width="320px">
      <div style="text-align: center;height: 50px;line-height: 50px;">
        <i class="el-icon-question"
           style="color: #082AFF;margin-right: 10px;"></i><span>删除操作不可恢复，确认继续删除?</span>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button :loading="delloading" size="mini" @click="delvisible = false">取 消</el-button>
        <el-button :loading="delloading" size="mini" type="primary" @click="deleteConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import * as $api from '@/api/riskManager/behavior'

export default {
  name: "sensitiveBehaviorMonitoringEnding", //页面名称，必填
  props: {},
  components: {},
  data() {
    return {
      queryForm: {
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      tableList: [],
      total: 0,

      addVisible: false,
      endingForm: {
        finishContent: ['']
      },
      endingRules: {},
      addLoading: false,

      finishId: '',
      delvisible: false, // 删除选择弹窗
      delloading: false,
    }
  },
  watch: {},
  methods: {
    goback() {
      this.$router.go(-1)
    },
    handleQuery() {
      this.queryForm.pageNum = 1
      this.getListFn()
    },
    handleReset() {

    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.getListFn()
    },
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.getListFn()
    },
    getListFn() {
      let obj = {
        ...this.queryForm
      }
      this.tableList = []
      this.loading = true
      $api.queryLanguageList(obj).then(res => {
        if (res.code == 200) {
          this.tableList = res.rows
          this.total = res.total
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 新增结束语
    toAdd() {
      this.endingForm = {
        finishContent: ['']
      }
      this.$nextTick(() => {
        this.$refs['endingForm'].clearValidate()
      })
      this.addVisible = true
    },
    // 提交结束语
    handelEndingConfirm() {
      if (this.endingForm.finishContent.some(item => item == '' || !item)) return this.$message.error('请录入结束语!')
      this.addLoading = true
      $api.addLanguage({finishContent: this.endingForm.finishContent}).then(res => {
        if (res.code == 200) {
          this.addVisible = false
          this.$message.success('添加成功')
          this.handleQuery()
        }
        this.addLoading = false
      }).catch(() => {
        this.addLoading = false
      })
    },
    // 删除结束语
    todel(row) {
      this.delvisible = true
      this.finishId = row.finishId
    },
    deleteConfirm() {
      this.delloading = true
      $api.delLanguage({finishId: this.finishId}).then(res => {
        if (res.code == 200) {
          this.delvisible = false
          this.$message.success('删除成功')
          this.handleQuery()
        }
        this.delloading = false
      }).catch(() => {
        this.delloading = false
      })
    },
  },
  mounted() {
    this.handleQuery()
  },
  created() {
  },
}

</script>

<style lang="scss" scoped>

.app-container {
  height: 100%;
}


.conIcon {
  font-size: 18px;
  cursor: pointer;
}

// 必录框前面的 '*'
.showRedRules {
  ::v-deep.el-form-item__label:before {
    content: '*';
    color: #e74e59;
    margin-right: 4px;
  }
}
</style>
